<template>
  <div class="sidebar">
    <h3 class="sidebar-title">订单中心</h3>
    <el-menu
      :default-active="activeTab"
      class="sidebar-menu"
      @select="handleMenuSelect"
    >
      <el-menu-item index="unpaid">
        <span>未付款</span>
      </el-menu-item>
      <el-menu-item index="paid">
        <span>已付款</span>
      </el-menu-item>
      <el-menu-item index="shipped">
        <span>已发货</span>
      </el-menu-item>
      <el-menu-item index="completed">
        <span>已收货</span>
      </el-menu-item>
      <el-menu-item index="cancelled">
        <span>已取消</span>
      </el-menu-item>
      <el-menu-item index="refund">
        <span>退货中</span>
      </el-menu-item>
      <el-menu-item index="return">
        <span>已退款</span>
      </el-menu-item>
      <el-menu-item index="all">
        <span>全部订单</span>
      </el-menu-item>
    </el-menu>

    <h3 class="sidebar-title">个人中心</h3>
    <el-menu
      class="sidebar-menu"
      @select="handleMenuSelect"
    >
      <el-menu-item index="profile">
        <span>个人信息</span>
      </el-menu-item>
      <el-menu-item index="password">
        <span>密码修改</span>
      </el-menu-item>
      <el-menu-item index="address">
        <span>收货地址</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script setup>
import { ref, defineEmits } from 'vue'

// 定义props
const props = defineProps({
  activeTab: {
    type: String,
    default: 'all'
  }
})

// 定义emit事件
const emit = defineEmits(['menu-select'])

// 菜单选择处理
const handleMenuSelect = (index) => {
  emit('menu-select', index)
}
</script>

<style scoped>
.sidebar {
  width: 200px;
  background: #f8f9fa;
  padding: 30px 20px;
}

.sidebar-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0 0 15px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid #e0e0e0;
}

.sidebar-title:not(:first-child) {
  margin-top: 30px;
}

.sidebar-menu {
  border: none;
  background: transparent;
}

:deep(.sidebar-menu .el-menu-item) {
  color: #666;
  font-size: 14px;
  height: 40px;
  line-height: 40px;
  margin-bottom: 5px;
  border-radius: 4px;
}

:deep(.sidebar-menu .el-menu-item:hover) {
  background-color: #fff4e6;
  color: #ff8c00;
}

:deep(.sidebar-menu .el-menu-item.is-active) {
  background-color: #ff8c00;
  color: white;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .sidebar {
    width: 100%;
  }
}
</style>